<template>
  <div id="operatemember">  

  <el-form ref="form"  label-width="80px">           
         
          <el-row style="margin-bottom:10px;"> 
             <el-col :span="12">
             <div style="height:38px;line-height:38px;width:150px;"> 
                  <i class="el-icon-back" @click="goBack"></i> 
                  {{ $route.query.name }} 
                </div> 
            </el-col>     
             <el-col :span="12" style="text-align: center;display: flex;justify-content: flex-end;">
                <div class="custom_button_width" @click="add_but()">新增</div>
            </el-col> 
        </el-row>
    </el-form>

   <!-- 渲染数据list -->
   <operate-member-list :data="data" @up_list_fun="list_fun"> </operate-member-list>

     <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>


     <!-- 添加 -->
        <el-dialog title="添加" :visible.sync="mtk"  width="400px">
            <div style="width:100%;"> 

            <el-form ref="form"   label-width="100px" style="width:100%;">
                <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_form.account" placeholder="帐号"></el-input>
                </el-form-item>   
                 <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_form.password" placeholder="密码"></el-input>
                </el-form-item>
                 <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_form.nickname" placeholder="名称"></el-input>
                </el-form-item>  
                <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_form.telphone" placeholder="手机号"></el-input>
                </el-form-item>                                
            </el-form>

                <div style="text-align: center;width:50%;margin:auto;margin-top:30px;">
                    <el-button type="primary" class="custom_color_button" style="width:100%;" @click="mtk_but_qr">确认</el-button>
                </div>

            </div> 
        </el-dialog>

    

      
  </div>
</template>

<script>
import OperateMemberList from '@/view/Member/OperateMemberList'
export default {
  name: 'operatemember',
  data () {
    return {
        data:[],
        page:1,
        count:0,
        mtk:false,
        mtk_form:{
          account:'',
          telphone:'',
          password:'',
          nickname:''
        },
        my_ctid:''
    }
  },
 components:{
    OperateMemberList
  },
  created(){
     this.my_ctid = this.$route.query.ctid
     this.list_fun()
  },
  mounted (){
    
  },
  methods: {
      list_fun(){
          this.post("/operate_center/listOfManager", {
              ctid:this.my_ctid,
              page:this.page,
	        }).then(res => {
            this.count = res.result.count
            this.data = res.result.list
            //console.log(res,"asdad")
         })
      },
     add_but(){
         this.mtk = true
      },
      mtk_but_qr(){
          this.post("/operate_center/addManager", {
              ctid:this.my_ctid,
              account:this.mtk_form.account,
              password:this.mtk_form.password,
              nickname:this.mtk_form.nickname,
              telphone:this.mtk_form.telphone,
	         }).then(res => {
             if(res.error_code == 0){
                    this.page = 1
                    this.list_fun()
                    this.mtk = false
                    console.log(res)
                     this.open1(res.result,'success')  //提示框
                }else {
                    this.open1(res.message,'warning')
                }

          })
      },
    goBack() {
        this.$router.go(-1)
    },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }

  }
}
</script>


<style scoped>
</style>
